<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>移动</title>
	<style>
		*{padding:0;margin:0;}
		div{
			width:30px;
			height:200px;
			float:left;
		}
		select{
			width:200px;
			float:left;
		}
	</style>
</head>
<body>
	<select id="cid" multiple>
		<option value="斌斌">斌斌</option>
		<option value="大幂幂">大幂幂</option>
		<option value="小甜甜">小甜甜</option>
	</select>
	<div>
		<button onclick="fun('cid','sid')">></button>
		<button onclick="fun('sid','cid')"><</button>

	</div>
	<select id="sid" multiple></select>
</body>

	<script>
		function fun(id,id1){
			id = document.getElementById(id);
			id1 = document.getElementById(id1);

			list = id.options;

			for(var i=0;i<list.length;i++){
				if(list[i].selected){
					list[i].selected=false;
					//移动到另一个select中
					id1.add(list[i]);
					i--;
				}
			}

		}


	</script>

</html>